<template>
    <div class="member-list-main">
        <ZwSearchForm :option="searchOption" @search="search" @reset="reset" />
        <ZwTable
            ref="tableRef"
            class="table-box"
            tab-h="initial"
            :option="tableOption"
            :row-key="getRowKey"
            :param-prop="state.paramProp"
            :fetch-params="state.searchParams"
            :fetch-api="fetchApi()">
        </ZwTable>
    </div>
</template>
<script setup lang="tsx">
import { ref, reactive, onMounted, computed } from 'vue';
import { ElMessage, ElButton } from 'element-plus';
import ZwSearchForm from '@/components/zw/search-form/SearchForm';
import ZwTable from '@/components/zw/table/Table';

import { getMemberLevelList } from '@/api/member/memberLevel/index';
import { getMemberLevelListChangeRecord } from '@/api/member/memberLevel/index';
import { deepCopy } from '@/utils/helper';
import { useRouter } from 'vue-router';

const router = useRouter();

const tableRef = ref<any>(null);

const levelTypeList = ref<any>([]);

const levelList = [
    { label: '会员激活', value: 'active' },
    { label: '会员升级', value: 'up' },
    { label: '会员降级', value: 'degrade' }
];

const searchOption = computed(() => {
    return [
        {
            label: '会员信息',
            name: 'keywords',
            type: 'input',
            clearable: true,
            placeholder: '请输入会员ID/昵称/手机号'
        },
        {
            label: '变更类型',
            name: 'level_change_type',
            type: 'select',
            clearable: true,
            placeholder: '请选择变更类型',
            optionList: [
                { label: '会员激活', value: 'active' },
                { label: '会员升级', value: 'up' },
                { label: '会员降级', value: 'degrade' }
            ]
        },
        {
            label: '新等级',
            name: 'new_level',
            type: 'select',
            clearable: true,
            placeholder: '请选择新等级',
            fetchOptionApi: () => {
                return new Promise(resolve => {
                    resolve(levelTypeList.value);
                });
            },
            formatOption: (v: any) => ({
                label: v.member_level_name,
                value: v.id
            })
        },
        {
            label: '原等级',
            name: 'origin_level',
            type: 'select',
            clearable: true,
            placeholder: '请选择原等级',
            fetchOptionApi: () => {
                return new Promise(resolve => {
                    resolve(levelTypeList.value);
                });
            },
            formatOption: (v: any) => ({
                label: v.member_level_name,
                value: v.id
            })
        },
        {
            label: '变更时间',
            name: 'created_at',
            value: [],
            type: 'datePicker',
            datePickerType: 'daterange',
            datePickerFormat: 'YYYY-MM-DD HH:mm:ss',
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            startPlaceholder: '开始日期',
            endPlaceholder: '结束日期'
        }
    ];
});

const tableOption = [
    {
        prop: 'member_no',
        label: '会员ID',
        width: 210,
        render({ row, column, index }: any) {
            return (
                <div class="pointer-name" onClick={() => handlerCustomer(row)}>
                    {row.member_no}
                </div>
            );
        }
    },
    {
        prop: 'nickname',
        label: '会员昵称',
        width: 160
    },
    {
        prop: 'mobile',
        label: '手机号',
        width: 150
    },
    {
        prop: 'level_change_type',
        label: '变更类型',
        width: 180,
        render({ row, column, index }: any) {
            const info: any = levelList.find(el => el.value == row.level_change_type) || {};
            return <div>{info.label}</div>;
        }
    },
    {
        prop: 'origin_level_name',
        label: '原等级',
        width: 180,
        render({ row, column, index }: any) {
            return <div>{row.origin_level_name ? row.origin_level_name : '--'}</div>;
        }
    },
    {
        prop: 'change_level_name',
        label: '新等级',
        width: 200
    },
    {
        prop: 'created_at',
        label: '变更时间',
        minWidth: 200
    }
];

const defaultParams = {
    keywords: '',
    level_change_type: '',
    new_level: '',
    origin_level: '',
    created_at: []
};

const state = reactive({
    searchParams: deepCopy(defaultParams),
    paramProp: { page: 'page', pageSize: 'page_size' }
});

const getRowKey = (row: any) => {
    return row.id;
};

const search = (data: any) => {
    tableRef.value.getTable().clearSelection();
    state.searchParams = deepCopy({ ...defaultParams, ...data });
};

const reset = () => {
    tableRef.value.getTable().clearSelection();
    state.searchParams = deepCopy({ ...defaultParams });
};

const fetchApi = () => {
    return getMemberLevelListChangeRecord;
};

const getLevelType = async () => {
    const res = await getMemberLevelList();
    levelTypeList.value = res.data || [];
};

const handlerCustomer = (val: any) => {
    if (!val.member_no) {
        return;
    }
    const url = `/member/memberManage/memberList/detail?member_no=${val.member_no}`;
    window.open(url, '_blank');
};

onMounted(() => {
    getLevelType();
});
</script>
<style lang="scss" scoped>
.member-list-main {
    height: calc(100vh - 142px);
    padding: 24px;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .zw-table {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: hidden;

        :deep(.el-table) {
            flex: 1;

            .el-table__empty-block {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }
    }

    :deep(.pointer-name) {
        cursor: pointer;
        color: #ff6b00;
    }
}
</style>
